<template>
    <div>
        <div v-if="perBtn">
            <div class="header" style="background-color: white">
                <el-page-header @back="goBack" content="案件收支录入">
                </el-page-header>
            </div>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark"><span style="font-size: 30px;font-weight: 600">案件收支</span>
                    </div>
                </el-col>
            </el-row>
            <el-form label-position="top" style="margin-left: 30px;margin-top: 20px">
                <el-container>
                    <el-form-item label="案件：">
                        <el-input @focus="dialogVisible= true" v-model="caseValue" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="已收款：" style="margin-left: 20px">
                        <el-input readonly :value="casePaidsal+'元'" style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="收款金额：">
                        <el-input type="number" v-model="cwInout.collectionMoney" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="收款日期：" style="margin-left: 20px">
                        <el-date-picker
                                v-model="cwInout.collectionDate"
                                type="date" value-format="yyyy-MM-dd" style="width: 500px;">
                        </el-date-picker>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-button type="primary" @click="nextPageBtn">下一步</el-button>
                </el-container>
            </el-form>

            <div>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="60%"
                >
                    <div>
                        <el-divider></el-divider>
                        <el-table
                                :data="cases2.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                border
                                style="width: 100%;font-size: 18px;" @selection-change="handler">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="id"
                                    label="" v-if="false">
                            </el-table-column>
                            <el-table-column
                                    prop="caseNo"
                                    label="案号">
                            </el-table-column>
                            <el-table-column
                                    prop="caseWtr"
                                    label="委托人">
                            </el-table-column>
                            <el-table-column
                                    prop="caseOppositeParties"
                                    label="对方当事人">
                            </el-table-column>
                            <el-table-column
                                    prop="caseAttorney"
                                    label="承办律师">
                            </el-table-column>
                            <el-table-column
                                    prop="collectionTime"
                                    label="收案日期">
                            </el-table-column>
                        </el-table>
                        <el-divider></el-divider>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 20, 40]"
                                :page-size="pagesize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="cases2.length"> //这是显示总共有多少数据，
                        </el-pagination>
                    </div>
                    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">退出</el-button>
  </span>
                </el-dialog>
            </div>
        </div>

        <div v-if="!perBtn">
            <div class="header" style="background-color: white">
                <el-page-header @back="perPageBtn" content="返回">
                </el-page-header>
            </div>
            <el-divider></el-divider>
            <el-form style="margin-left: 30px">
                <el-container>
                    <el-form-item label="收支日期：">
                        <el-input :value="cwInout.collectionDate" style="width: 500px;" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="收支金额：" style="margin-left: 20px">
                        <el-input :value="cwInout.collectionMoney" style="width: 500px;" readonly></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="代理费：">
                        <el-input :value="caseAgencyfee" style="width: 500px;" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="已收款：" style="margin-left: 20px">
                        <el-input :value="casePaidsal" style="width: 500px;" readonly></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="已开发票：">
                        <el-input :value="caseInvoiced" style="width: 500px;" readonly></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="收支类别：">
                        <el-cascader placeholder="请选择收支类别" clearable
                                     v-model="cwInout.id"
                                     :options="incomeType"
                                     style="width: 500px;"
                                     :props="{ expandTrigger: 'hover' ,checkStrictly:true,emitPath:true }"
                                     @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="支付方式：" style="margin-left: 20px">
                        <el-select v-model="cwInout.cWPayType" clearable placeholder="请选择支付方式" style="width: 500px;">
                            <el-option
                                    v-for="item in payOption"
                                    :key="item.cWPayType"
                                    :label="item.payType"
                                    :value="item.cWPayType">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="支付人：">
                        <el-input v-model="cwInout.cwPayer"  style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="备注：">
                        <el-input type="textarea" v-model="cwInout.cwRemark" style="width: 1000px;"></el-input>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item>
                        <el-button type="primary" @click="tj">确认提交</el-button>
                    </el-form-item>
                </el-container>
            </el-form>
        </div>
    </div>
</template>

<script>
    import CaseLawService from '../../../model/gs/CaseLawService'   ///cwinout/findCaseType
    import CwInoutTypeService from '../../../model/ww/cw_inout_type/CwInoutTypeService'
    import CwInoutService from '../../../model/ww/cw_inout/CwInoutService'

    const caseLawService = CaseLawService.getInstance();
    const cwInoutTypeService=CwInoutTypeService.getInstance();
    const cwInoutService=CwInoutService.getInstance();
    export default {
        name: "CaseFinanace",
        data() {
            return {
                dialogVisible: false,
                cases: {},
                cases2: [],
                currentPage: 1, //初始页
                pagesize: 5,  //每页的数据
                caseValue: '', //案号输入框值
                casePaidsal: 0,//已收款
                caseAgencyfee: 0,//代理费
                caseInvoiced: 0,//已开发票
                perBtn: true,
                payOption: [
                    {
                        cWPayType: '1',
                        payType: '网银'
                    },
                    {
                        cWPayType: '2',
                        payType: '银行卡'
                    },
                    {
                        cWPayType: '3',
                        payType: '支付宝'
                    },
                    {
                        cWPayType: '4',
                        payType: '微信'
                    },
                    {
                        cWPayType: '5',
                        payType: '其他'
                    }
                ],
                cw_pay_type: '',
                incomeType:[], //收支类别数据
                cwInout:{
                    id:'',
                    collectionDate: '',  //收款日期
                    cwInoutPerson:'', //收支人
                    collectionMoney: '',//收支金额
                    cWPayType:'' , //支付方式,
                    caseLawId:'',  //案号ID
                    cwEnteringDate:'',//录入日期
                    cwRemark:'',//备注
                    cwPayer:''//付款人
                }  //收支对象
            };
        },
        methods: {
            List() {
                caseLawService.list().then((response) => {
                    this.cases2 = response.data.data
                })
            },
            handleSizeChange(size) {
                this.pagesize = size; //每页下拉显示数据

            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage; //点击第几页

            },
            handler(selection) {  //多选框改变拿值
                if (selection.length != 0) {
                    this.cwInout.caseLawId=selection[0].id
                    this.cwInout.cwInoutPerson=selection[0].hrEmpId
                    this.caseInvoiced = selection[0].caseInvoiced
                    this.caseAgencyfee = selection[0].caseAgencyfee
                    this.casePaidsal = selection[0].casePaidsal
                    this.caseValue = selection[0].caseNo
                }
                this.dialogVisible = false
            },
            nextPageBtn() {//下一步
                if(this.caseValue==''){
                    this.$message('请选择案件');
                      return;
                }
                if(this.cwInout.collectionMoney==''){
                    this.$message('请填写收款金额');
                    return;
                }
                if(this.cwInout.collectionDate==''){
                    this.$message('请选择收款日期');
                    return;
                }

                this.perBtn = !this.perBtn
                this.cwInoutType();
            },
            perPageBtn() {//返回
                this.perBtn = !this.perBtn
            },
            //查询收支类型渲染下拉框
            cwInoutType(){
                cwInoutTypeService.findCaseType().then((response)=>{
                    this.incomeType=response.data.data
                })
            },
            handleChange(ids){  //收支类别下拉框改变事件
                if(ids.length==2){
                    this.cwInout.id=ids[ids.length-1]
                }
                if(ids.length==1){
                    this.cwInout.id=ids[ids.length-1]
                }
            },
            tj(){
                //提交
                if(this.cwInout.id==''){
                    this.$message('请选择收支类别');
                    return;
                }
                if(this.cwInout.cWPayType==''){
                    this.$message('请选择支付方式');
                    return;
                }
                var date=new Date();
                var time=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDay()
                this.cwInout.cwEnteringDate=time
                cwInoutService.savaTj(this.cwInout).then(()=>{
                    this.$message('录入成功')
                    //格式化输入框
                    this.caseValue=''
                    this.casePaidsal=0
                    this.cwInout.collectionMoney=''
                    this.cwInout.collectionDate=''
                    this.perBtn = !this.perBtn
                })
            },
            goBack(){
                history.back()
            }
        },
        created() {
            this.List();
        }

    }
</script>

<style scoped>
    .el-row {
        margin-top: 50px;
        margin-left: 30px;
    }

    span > .red {
        color: red;
        font-size: 20px;
    }

    span {
        font-size: 15px;
        font-weight: 600;
    }
</style>
